<template>
  <!-- 站点预览dialog -->
            <Dialog
                :layer="viewLayer"
                v-model:visible="viewLayer.show"
                @close="dialogClose"
            >
            <div class="site-tree">
                <div class="tree">
                    <div class="space">
                        <el-select
                            v-model="dtTenant" 
                            placeholder="请选择空间" 
                            clearable
                            @change="dtTenantChange"
                            style="width:300px"
                        >
                            <el-option v-for="(item) in tenantList" 
                                :key="item.tenant"
                                :value="item.tenant"
                                :label="item.tenantName" 
                            />
                        </el-select>
                    </div>
                    <el-tree 
                        :props="treeProps" 
                        :load="loadTreeNode" 
                        lazy 
                        @node-click="nodeClick"
                        :data="treeData"
                    />
                </div>
                <div class="view-detail" v-if="Object.keys(detailInfo).length">
                    <h1>{{detailInfo['institutionName']}}</h1>
                    <div class="info">
                        <p class="item">
                            <span class="title">自定义名称：</span>
                            <span class="content">{{detailInfo['customName']}}</span>
                        </p>
                        <p class="item">
                            <span class="title">组织ID：</span>
                            <span class="content">{{detailInfo['id']}}</span>
                        </p>
                        <p class="item">
                            <span class="title">组织级别：</span>
                            <span class="content">{{institutionLevelObj[detailInfo['institutionLevel']]}}</span>
                        </p>
                        <p class="item">
                            <span class="title">组织类型：</span>
                            <span class="content">{{institutionObj[detailInfo['institutionType']]}}</span>
                        </p>
                        <p class="item">
                            <span class="title">所在地区：</span>
                            <span class="content">{{detailInfo['formatArea']}}</span>
                        </p>
                        <p class="item">
                            <span class="title">组织属性：</span>
                            <span class="content">{{institutionAttrObj[detailInfo['institutionType']]}}</span>
                        </p>
                        <p class="item">
                            <span class="title">所属学段：</span>
                            <span class="content">{{formatStages(detailInfo['stages'])}}</span>
                        </p>
                        <p class="item">
                            <span class="title">下属组织：</span>
                            <span class="content">{{detailInfo['subInstitutionCount']}}</span>
                        </p>
                        <p class="item">
                            <span class="title">创建时间：</span>
                            <span class="content">{{formatTime(detailInfo['gmtCreate'])}}</span>
                        </p>
                    </div>
                </div>
                <no-data style="flex:1;" v-else/>
            </div>
            </Dialog>
</template>

<script>
import { defineComponent, toRefs, ref, reactive, toRef, computed, onMounted, watch } from 'vue'
import Dialog from '@/components/dialogComp.vue'
import { useStore } from 'vuex'
import { formatTimestamp } from '@/lib/tools'
import noData from '@/components/no-data.vue'
import { 
    institutionList, 
    institutionAttrList, 
    institutionLevelList,
    institutionObj,
    institutionLevelObj,
    institutionAttrObj
} from '../filter-data.js'
export default defineComponent({
    // name:'',
    props: {
        // 空间列表
        tenantList: {
            type: Array,
            default: () => []
        }
    },
    components: {
        Dialog,
        noData
    },
    setup(props, context){
        const store = useStore()
        // 状态数据
        const state = reactive({
            treeData: [],
            dtTenant: '',
            institutionList,
            institutionAttrList,
            institutionLevelList,
            institutionObj,
            institutionLevelObj,
            institutionAttrObj,
            detailInfo: {}, // 站点节点详情
            viewLayer: {
                show: false,
                title: '组织站点结构',
                width: '1000px',
                showButton: false
            },
            treeProps: {
                label: 'institutionName',
                isLeaf: 'leaf',
                class: 'tree-label'
            }
        })

        // 方法
        const fns = {
            async loadTreeNode(node, resolve) {
                const { id = '' } = node.data
                console.log(node)
                if (node.level === 0) {
                    // const data = await fns.institutionTree(dtTenant)
                    // return resolve(data)
                }else{
                    const data = await fns.subInstitutionTree(id)
                    return resolve(data)
                }
            },
            dtTenantChange(val){
                fns.institutionTree(val)
            },
            // 学段格式化
            formatStages(stage = ''){
                return (stage && stage.map(item => item.name).join(',')) || ''
            },
            // 格式化时间戳
            formatTime(time){
                return formatTimestamp(time, 'YYYY-MM-DD HH:mm:ss')
            },
            open(){
                state.viewLayer.show = true
                state.dtTenant = props.tenantList.length && props.tenantList[0].tenant
                state.dtTenant && fns.institutionTree(state.dtTenant)
            },
            // 弹窗关闭
            dialogClose(){
                state.detailInfo = {}
                state.treeData = []
            },
            // 组织树点击获取详情
            nodeClick(node){
                const { provinceName = '', cityName = '', districtName = '' } = node
                const formatArea = [provinceName, cityName, districtName].filter(item => item != '').join('/')
                state.detailInfo = {...node, formatArea}
            },
            // 顶级组织树
            institutionTree(name = ''){
               return store.dispatch('proxyAction', {
                    name: 'findTopInstitutionList',
                    message: false,
                    queries: {
                        dtTenant: name,
                        scene: 'ruiyun'
                    }
                }).then((res) => {
                    state.treeData = res.data || []
                    // return res.data || []
                }).catch(err => {
                    console.log(err)
                }) 
            },
            // 查找下级组织树
            subInstitutionTree(id = ''){
               return store.dispatch('proxyAction', {
                    name: 'findSubInstitution',
                    message: false,
                    queries: {
                        parentInstitutionId: id,
                        pageIndex: 1,
                        pageSize: 1000
                    }
                }).then((res) => {
                    return res.data.rows || []
                }).catch(err => {
                    console.log(err)
                }) 
            }
        }

        // 计算属性
        const computes = {}
        // watch(() => props.tenantList, (n) => {
        //     if(n.length){
        //         state.dtTenant = n[0].value
        //         fns.institutionTree(state.dtTenant)
        //     }
        // }, {
        //     deep: true,
        //     immediate: true
        // })
        onMounted(() => {})

        return {
            ...toRefs(state),
            ...fns,
            ...computes
        }
    }
})
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .site-tree{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .space{
        margin-bottom: 20px;
    }
    .tree{
      width:300px;
    }
    .view-detail{
        margin-left: 50px;
        .info{
            display: flex;
            flex-wrap: wrap;
            .item{
                width: 50%;
                margin: 20px 0;
                display: flex;
                align-items: flex-start;
                .title{
                    margin-right: 20px;
                }
                .content{
                    flex: 1;
                }

            }
        }
    }
    ::v-deep .el-tree-node__label{
        width:80%;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .el-tree{
        max-height: 400px;
        overflow: auto;
    }
</style>
